<template>
  <div class="forum-container">
    <!-- 版块头部 -->
    <div class="forum-header">
      <h2>热门讨论</h2>
      <el-button type="primary" @click="handleNewPost">
        <el-icon>
          <EditPen />
        </el-icon>
        发新帖
      </el-button>
    </div>

    <!-- 帖子筛选 -->
    <div class="filter-bar">
      <el-radio-group v-model="filterType">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="hot">热门</el-radio-button>
        <el-radio-button label="new">最新</el-radio-button>
      </el-radio-group>

      <el-select v-model="selectedTag" class="tag-select" clearable placeholder="选择分类">
        <el-option v-for="tag in tags" :key="tag.value" :label="tag.label" :value="tag.value" />
      </el-select>
    </div>

    <!-- 帖子列表 -->
    <div class="post-list">
      <el-card v-for="post in filteredPosts" :key="post.id" class="post-card" shadow="hover">
        <div class="post-content">
          <!-- 左侧互动数据 -->
          <div class="interaction-data">
            <div class="stat-item">
              <el-icon>
                <Star />
              </el-icon>
              <span>{{ post.likes }}</span>
            </div>
            <div class="stat-item">
              <el-icon>
                <ChatDotRound />
              </el-icon>
              <span>{{ post.replies }}</span>
            </div>
          </div>

          <!-- 主要内容 -->
          <div class="main-content">
            <h3 class="post-title" @click="viewPost(post.id)">
              {{ post.title }}
              <el-tag v-for="tag in post.tags" :key="tag" :type="tagTypes[tag]" class="post-tag" size="small">
                {{ tag }}
              </el-tag>
            </h3>
            <div class="post-meta">
              <el-avatar :size="24" :src="post.avatar" />
              <span class="author">{{ post.author }}</span>
              <el-icon>
                <Clock />
              </el-icon>
              <span class="time">{{ post.time }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :page-size="10" :total="100" background layout="prev, pager, next" />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ChatDotRound, Clock, EditPen, Star } from '@element-plus/icons-vue'

// 模拟数据
const posts = ref([
  {
    id: 1,
    title: '大家最近单曲循环最多的歌曲是什么？',
    likes: 245,
    replies: 89,
    tags: ['讨论', '流行'],
    author: '音乐爱好者',
    time: '2小时前',
    avatar: 'https://picsum.photos/40/40'
  },
  {
    id: 2,
    title: '经典摇滚专辑推荐TOP10',
    likes: 189,
    replies: 45,
    tags: ['推荐', '摇滚'],
    author: '摇滚老炮',
    time: '5小时前',
    avatar: 'https://picsum.photos/40/40'
  }
  // 更多模拟数据...
])

const filterType = ref('hot')
const selectedTag = ref(null)
const tags = ref([
  { value: '推荐', label: '精品推荐' },
  { value: '讨论', label: '自由讨论' },
  { value: '摇滚', label: '摇滚音乐' },
  { value: '流行', label: '流行音乐' }
])

const tagTypes = {
  '推荐': 'success',
  '讨论': 'info',
  '摇滚': 'danger',
  '流行': 'warning'
}

// 计算属性
const filteredPosts = computed(() => {
  return posts.value.filter(post => {
    const matchType = filterType.value === 'all' || (filterType.value === 'hot' ? post.likes > 100 : post.id > 5)
    const matchTag = !selectedTag.value || post.tags.includes(selectedTag.value)
    return matchType && matchTag
  })
})

const handleNewPost = () => {
  // 发帖逻辑
}

const viewPost = postId => {
  // 查看帖子详情逻辑
}
</script>

<style scoped>
.forum-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.tag-select {
  width: 200px;
}

.post-card {
  margin-bottom: 15px;
  transition: all 0.3s;
}

.post-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-content {
  display: flex;
  gap: 20px;
}

.interaction-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-right: 1px solid #eee;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
  color: #666;
}

.main-content {
  flex: 1;
}

.post-title {
  cursor: pointer;
  transition: color 0.3s;
  margin-bottom: 8px;
}

.post-title:hover {
  color: #e74c3c;
}

.post-tag {
  margin-left: 8px;
  vertical-align: text-top;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 0.9em;
}

.author {
  font-weight: 500;
  color: #2c3e50;
}

.time {
  color: #999;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
